.dx-scrollable-scrollbar-simulated {
    position: relative;
}

.dx-scrollable {
    display: block;
    height: 100%;
    min-height: 0;
}

.dx-scrollable-native {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-scroll-snap-type: proximity;

    .dx-scrollable-scrollbar {
        display: none;
    }

    &.dx-scrollable-scrollbar-simulated .dx-scrollable-scrollbar {
        display: block;
    }

    .dx-scrollable-container {
        -webkit-overflow-scrolling: touch;
        position: relative;
        height: 100%;
    }

    &.dx-scrollable-vertical,
    &.dx-scrollable-vertical .dx-scrollable-container {
        .touch-action(pan-y);
        overflow-x: hidden;
        overflow-y: auto;
    }

    &.dx-scrollable-horizontal,
    &.dx-scrollable-horizontal .dx-scrollable-container {
        .touch-action(pan-x);
        float: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    &.dx-scrollable-both,
    &.dx-scrollable-both .dx-scrollable-container {
        .touch-action(e("pan-y pan-x"));
        float: none;
        overflow-x: auto;
        overflow-y: auto;
    }

    &.dx-scrollable-disabled,
    &.dx-scrollable-disabled .dx-scrollable-container {
        .touch-action(auto);
    }

    &.dx-scrollable-scrollbars-hidden {
        ::-webkit-scrollbar {
            opacity: 0;
        }
    }

    &.dx-scrollable-native-ios {
        .dx-scrollable-content {
            min-height: 101%;
            .box-sizing(content-box);
        }

        &.dx-scrollable-horizontal {
            .dx-scrollable-content {
                min-height: 0;
                padding: 0;
            }
        }
    }

    &.dx-scrollable-native-generic {
        -ms-overflow-style: auto;
        overflow: hidden;

        .dx-scrollable-content {
            height: auto;
        }
    }

    &.dx-scrollable-native-android .dx-scrollable-content {
        .transform(none);
        z-index: 0;
    }
}

.dx-scrollable-scrollbar-simulated {
    &, .dx-scrollable-container {
        ::-webkit-scrollbar {
            display: none;
        }
    }
}

.dx-scrollable-container {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    overflow: hidden;
    width: 100%;
    height: 100%;

    &:focus {
        outline: none;
    }
}

.dx-scrollable-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.dx-scrollable-content {
    position: relative;
    min-height: 100%;
    .box-sizing();
    .dx-clearfix;
}

.dx-scrollable-horizontal .dx-scrollable-content,
.dx-scrollable-both .dx-scrollable-content {
    display: block;
    float: left;
    min-width: 100%;
}

.dx-scrollable-scrollbar {
    position: absolute;
    pointer-events: auto;
}

.dx-scrollbar-vertical {
    top: 0;
    right: 0;
    height: 100%;

    .dx-scrollable-scroll {
        width: 5px;
    }
}

.dx-scrollbar-horizontal {
    bottom: 0;
    left: 0;
    width: 100%;

    .dx-scrollable-scroll {
        height: 5px;
    }
}

.dx-scrollable-scroll {
    position: relative;
    background-color: #888; /* NOTE: fallback for rgba non-supporting*/
    background-color: rgba(0, 0, 0, .5);
    -webkit-transform: translate(0px, 0px);
    .transition(~"background-color 0s linear");

    &.dx-state-invisible {
        display: block !important;
        background-color: transparent; /* NOTE: fallback for rgba non-supporting */
        background-color: rgba(0, 0, 0, 0);
        .transition(~"background-color .5s linear 1s");
    }
}

.dx-rtl .dx-scrollable,
.dx-rtl.dx-scrollable {
    direction: ltr;
    .dx-scrollable-content, .dx-scrollable-container {
        direction: ltr;
    }
    .dx-scrollable-content > * {
        direction: rtl;
    }

    .dx-scrollable-scrollbar {
        &.dx-scrollbar-vertical {
            right: auto;
            left: 0;
        }

        &.dx-scrollbar-horizontal {
            direction: ltr;
        }
    }
}

.dx-device-ios-6 {
    .dx-scrollable-content {
        .backface-visibility(hidden);
    }
}

.dx-device-android {
    .dx-scrollable-native.dx-scrollable-scrollbars-hidden {
        ::-webkit-scrollbar {
            display: none;
        }
    }
}
